<template>
  <!-- 课程和消息按钮 -->
  <div class="container">
    <!-- 选项卡导航 -->
    <div class="tab-container">
      <div class="tabs" ref="tabs">
        <div v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]" @click="setActiveTab(index)">
          {{ tab }}
          <div v-if="activeTab === index" class="underline"></div>
        </div>
      </div>
      
      <!-- 帖子列表 -->
      <div class="post-list">
        <div v-for="(post, index) in posts" :key="index" class="post-item" @click="showPostDetail">
          <img :src="post.image" alt="帖子图片" class="post-image">
          <h3>{{ post.title }}</h3>
		  <div style="float: left;"><u-icon name="account-fill" class="postMsg"></u-icon><span>{{ post.author }}</span></div>
		  <div style="float: left;"><u-icon name="eye" class="postMsg"></u-icon><span> {{ post.likes }}</span></div>
		  <div style="float: left;"><u-icon name="star" class="postMsg"></u-icon><span>{{ post.collects }}</span></div>
          
        </div>
      </div>
    </div>
	
	
	<u-button class="fixed-button" type="primary" shape="circle" text="发布" style="width: 10%;"></u-button>
	<!-- <u-icon name="plus" class="fixed-button"></u-icon> -->
	
	
  </div>
</template>

<script>
export default {
  name: 'PostList',
  data() {
    return {
      tabs: ["推荐", "学习", "日常", "经验"],
      activeTab: 0,
      posts: [
        { image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题1', author: '用户姓名1', likes: 10, collects: 10 },
        { image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题2', author: '用户姓名2', likes: 20, collects: 10 },
        { image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题3', author: '用户姓名3', likes: 30, collects: 10 },
        { image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
		{ image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '帖子标题4', author: '用户姓名4', likes: 40, collects: 10 },
        // ...更多帖子
      ]
    };
  },
  methods: {
    setActiveTab(index) {
      this.activeTab = index;
      console.log("被点击的选项:", this.tabs[index]);
    },
	showPostDetail(){
		uni.navigateTo({
			url: '/pages/community/communityPage'
		});
	},
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;  /* 确保选项卡和帖子列表垂直排列 */
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px 5%;
  background-color: #ffffff;
}

.tab-container {
  width: 100%;  /* 确保导航和帖子列表宽度一致 */
}

.tabs {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 5px;
  margin-bottom: 16px;  /* 给帖子列表留出一些空间 */
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab-item {
  font-size: 16px;
  color: #666;
  padding: 0 25px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-item.active {
  color: #007bff;
  font-weight: bold;
}

.underline {
  width: 50%;
  height: 2px;
  background-color: #007bff;
  position: absolute;
  bottom: -3px;
}

/* 帖子列表部分 */
.post-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行显示两个帖子 */
  gap: 16px; /* 帖子之间的间距 */
  width: 100%;  /* 确保帖子列表宽度与父容器一致 */
}

.post-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.post-image {
  width: 100%;
  height: auto;
  display: block;
}

.postMsg{
	display: block;
	float: left;
}

h3 {
  margin-top: 12px;
  text-align: left;
  padding-left: 12px;
}

p {
  text-align: left;
  padding-left: 12px;
  margin-bottom: 12px;
}

/* 底部添加帖子按钮 */
.fixed-button {
  position: fixed; /* 设置为固定定位 */
  bottom: 50%;       /* 距离页面底部0像素 */
  right: 0;        /* 距离页面右侧0像素 */
  z-index: 9999;   /* 保证按钮在其他元素之上 */
}

</style>
